Data selections

In this tutorial we will show how you can create a single select behaviour in the chart.

What are behavioural actions?

Behaviours are how the canvas reacts to a particular interaction. A change in behaviour is a deviation from the default view of the canvas and thus is usually accompanied by a visual change. For example, when we hover over a point in the canvas, we change the behaviour of the canvas by highlighting the point ( thereby getting a tooltip). This happens because the behaviour of the chart has changed from the default rendered view to the highlighted view.

How does a behaviour change?

There are two ways to change the behaviour of a canvas :

• Interacting with a chart: When we interact with a chart, it causes a physical action to be triggered which changes the behaviour(s) attached to it
• Dispatching a behaviour dynamically: We can dynamically dispatch a behaviour with the required payloads, which can cause the behaviour to change.

Understanding the change in behaviour

In order to change the behaviour by using any of the above two ways, it has to be dispatched with a payload containing the criteria for the behaviour. The payload looks like this:

payload: {
  criteria: {
    dimensions: [["Origin"], ["Japan"], ["Cylinders"], [3, 6, 8]];
  }
}

Once the behaviour gets the payload, it searches for all the rows in the associated DataModel and identifies the rows that satisfy the criteria for the behaviour.

The rows that satisfy the criteria together comprise of the entry set. The rows that do not satisfy the criteria together comprise of the exit set.

These two sets form the basis of all kinds of output of an interaction. The selection and the rejection set taken together thus form the complete set, i.e., the complete set of rows in the DataModel.

Creating a singleSelect behaviour

Now we will learn how you can create a singleSelect behaviour.

There are two types of behaviours that are pre existing in Muze. They are only different in the way they create the entry and exit sets and thus it is up to you to use those sets as you want.

• Volatile Behaviour: A volatile behaviour is a type of behaviour that does not retain the Old Entry Set whenever the same behaviour changes. For instance, when we hover over bars in the chart, the entry set consists only of the bar currently being hovered upon.
• Persistent Behaviour: A persistent behaviour is a type of behaviour that retains the Old Entry Set whenever the same behaviour changes. For instance, when we click multiple bars in the chart, the entry set consists of all the bars that have been clicked on. Thus, both the New Entry Set and Old Entry Set constitute the selection set for every interaction.

For creating a singleSelect behaviour, you need to create a class called SingleSelect and extend the VolatileBehaviour class.

muze.ActionModel.for(canvas).registerBehaviouralActions(
  class SingleSelectBehaviour extends VolatileBehaviour {
    static formalName() {
      return "singleSelect";
    }
  },
);

Mapping the behaviour with a physical action

We then map the singleSelect behaviour with a physical action click. The click action by default exists in Muze and is mapped with the select behaviour which is responsible for multi-selection. So, we also need to detach the select behaviour from the click action. We do that by calling the dissociateBehaviour method and passing the name of the behaviour and the physical action.

    .registerPhysicalBehaviouralMap({
      click: {
        behaviours: ["singleSelect"]
      }
    })
    .dissociateBehaviour(["select", "click"])

Mapping the behaviour with a side effect

Finally, we map a side effect with the singleSelect behaviour so that it gets dispatched whenever the singleSelect behaviour is called. We add this in the canvas.layers().

.layers([
    {
      mark: "bar",
      interaction: {
        singleSelect: {
          sideEffects: {
            "plot-highlighter": {
              enabled: true,
              rules: [
                {
                  target: "entrySet",
                  style: {
                    opacity: 1,
                  },
                },
                {
                  target: "exitSet",
                  style: {
                    opacity: 0.3,
                  },
                },
              ],
            },
          },
        },
      },
    },
])

Example

const { muze, getDataFromSearchQuery } = viz;

const data = getDataFromSearchQuery();
const dm = new DataModel(data);

const ActionModel = muze.ActionModel;
const { VolatileBehaviour } = muze.Behaviours.standards;

canvas
  .rows(["Miles_per_Gallon"])
  .columns(["Maker"])
  .layers([
    {
      mark: "bar",
      interaction: {
        singleSelect: {
          sideEffects: {
            "plot-highlighter": {
              enabled: true,
              rules: [
                {
                  target: "entrySet",
                  style: {
                    opacity: 1,
                  },
                },
                {
                  target: "exitSet",
                  style: {
                    opacity: 0.3,
                  },
                },
              ],
            },
          },
        },
      },
    },
  ])
  .data(dm)
  .width(900)
  .height(600)
  .mount("#chart");

ActionModel.for(canvas)
  .registerBehaviouralActions(
    class SingleSelectBehaviour extends VolatileBehaviour {
      static formalName() {
        return "singleSelect";
      }
    },
  )
  // Map select behaviour with ctrlClick physical action
  .registerPhysicalBehaviouralMap({
    click: {
      behaviours: ["singleSelect"],
    },
  })
  // Disable the default select behaviour which is dispatched on click event
  .dissociateBehaviour(["select", "click"]);